<template>
    <div style="z-index:1; position: relative;">
        <div class="Card">
            <el-empty description="没有更多的数据" v-if="imgList.length == 0"></el-empty>
            <div v-if="show" id="waterfall-container">
                <div v-for="item in imgList" :key="item" class="waterfall-item" style="position: relative;"
                    :style="{ gridRow: item.gridRow }" @click="TopicClick(item.id)">
                    <img :src="item.src | ReplaceImageHttpFilter" style="border-radius: 10px;" />

                    <div class="text-bold text-black  text-cut">
                        <span>{{ item.title }}</span>
                    </div>

                </div>

            </div>
            <el-divider>已经到底了~~~~~</el-divider>
        </div>

    </div>
</template>

<script>
import {
    post
} from "@/utils/http";
import { FormatDateTime, ReplaceImagesHttp, GetObjectValue } from "@/utils/index";
import store from "@/store";
import { mapGetters } from "vuex";
export default {


    data() {
        return {
            imgList: [],
            show: false,
            pagination: {
                limit: 10,
                page: 1,
                total: 0,

            },

        }
    },
    async created() {
        let that = this;
        this.GetTopicListApi();

        // 监听滚动事件
        window.onscroll = async function () {
            // 获取页面的滚动高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 获取视窗的高度
            var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            // 获取文档的总高度
            var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

            // 判断是否滚动到最底部
            // 滚动高度 + 视窗高度 >= 文档总高度
            if (scrollTop + windowHeight >= documentHeight) {

                // 执行到达最底部的操作
                if (that.pagination.page * that.pagination.limit < that.pagination.total) {
                    that.pagination.page++;
                    await that.GetTopicListApi();
                }

            } else {

            }
        };
    },
    methods: {
        TopicClick(Id) {
            this.$router.push({
                path: `/Client/TopicDetail`, query: {
                    TopicId: Id,

                }
            });
        },
        computeGridRow() {
            let count = this.imgList.length;
            this.imgList.forEach((img) => {
                let image = new Image();
                image.src = img.src;
                image.onload = () => {
                    img.gridRow =
                        "auto / span " + Math.round((image.height * 200) / image.width);
                    count -= 1;
                    if (!count) {
                        this.show = true;
                    }
                };
            });
        },
        async GetTopicListApi() {

            let { Data: { Items, TotalCount } } = await this.$Post(`/Topic/RecommendTop10`,
                {
                    Limit: this.pagination.limit,
                    Size: this.pagination.limit,
                    Page: this.pagination.page,
                }

            );
            this.pagination.total = TotalCount;

            let temp = Items.map((e) => {
                return {
                    id: e.Id,
                    src: e.ImageUrls,
                    height: 0,
                    title: e.Title,
                    gridRow: "",
                };
            })
            this.imgList = [... this.imgList, ...temp]
            setTimeout(() => {
                this.computeGridRow();
            }, 100);
        },


    }
}

</script>
<style lang="scss" scoped>
$root-font-size: 10px;
$grid-gap: 1.6rem;

// 假设1920px屏幕打算显示6列
$column-count-1920: 10;
// 这里采用1900px是因为要排掉滚动条宽度，通常是17px，这里多排除一些，所以1920px减掉20px
$minmax-1920: (
    (1900px / $root-font-size) * 1rem - ($grid-gap * ($column-count-1920 + 1))) / $column-count-1920;

// 假设手机屏幕打算显示2列
$column-count-480: 2;
// 480的意思是目前世界上最大的手机分辨率宽度是低于480px，
// 所以@media screen and (max-device-width: 480px)使用480px。
// 这里采用360px是保证360px的老式手机依然能看到双列瀑布流
$minmax-480: (
    (360px / $root-font-size) * 1rem - ($grid-gap * ($column-count-480 + 1))) / $column-count-480;

// 如果你要在平板上有合理的显示效果，你应该添加更多的变量和@media规则，但本范例不再举例

html {
    font-size: $root-font-size;
}

body {
    margin: 0;
}

#waterfall-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($minmax-1920, 1fr)
    );
column-gap: $grid-gap;
box-sizing: border-box;
margin: 0 auto;
padding: $grid-gap;
max-width: (1920px / $root-font-size) * 1rem;

.waterfall-item {
    box-sizing: border-box;
    padding-bottom: $grid-gap;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    cursor: pointer;

    img {
        width: 100%;
        height: 100%;
    }
}
}

@media screen and (max-device-width: 480px) {
    #waterfall-container {
        grid-template-columns: repeat(auto-fill, minmax($minmax-480, 1fr));
    }
}
</style>
